<template>
  <el-card class="manual">
    <el-row>
      <el-form :model="form" :inline="true" ref="newStation" :rules="rules" label-width="120px">
        <el-col>
          <el-form-item label="任务开始时间:" prop="taskStartTime">
            <el-date-picker
              v-model="form.taskStartTime"
              :disabled="disable"
              size="small"
              type="daterange"
              @input="inspectDayChange"
              class="searchItemWidth"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="任务编码:" prop="taskNumber">
            <el-select v-model="form.taskNumber" size="small" placeholder="请选择任务编码" class="searchItemWidth" filterableable :disabled="disable">
              <el-option v-for="item in taskNumberList" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="文件名称:" prop="fileName">
            <!-- <el-autocomplete
              v-model="form.fileName"
              :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'fileName')"
              placeholder="请输入文件名称"
              class="searchItemWidth"
              size="small"
              @select="handleSelect('fileName')"
            ></el-autocomplete> -->
            <el-input v-model="form.fileName" @blur="getTaskList" placeholder="请输入文件名称" size="small"  class="searchItemWidth" :disabled="disable" />
          </el-form-item>
          <el-form-item label="文件描述:" prop="describe">
            <!-- <el-autocomplete
              v-model="form.describe"
              class="searchItemWidth"
              size="small"
              :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'describe')"
              placeholder="请输入文件描述"
              @select="handleSelect('describe')"
            ></el-autocomplete> -->
            <el-input v-model="form.describe" @blur="getTaskList" placeholder="请输入文件描述" size="small"  class="searchItemWidth" :disabled="disable" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="单位名称:" prop="companyCode">
            <el-select v-model="form.companyCode" size="small" placeholder="请选择单位" @change="companyChange" class="searchItemWidth" clearable filterable :disabled="disable">
              <el-option v-for="(item, idx) in tree" :label="item.companyName" :value="item.companyCode" :key="item.companyCode + idx"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="场站名称:" prop="stationName">
            <el-select v-model="form.stationName" size="small" placeholder="请选择场站" class="searchItemWidth" @change="stationChange" clearable filterable :disabled="disable">
              <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- calc(83.333333vw - 250px) -->
        <el-form-item label="诊断模型:" style="min-height:55px; height:unset;" :rules="{ required: true, message: '请选择诊断模型', trigger: 'change'}">
          <div style="width:733px; max-height:400px; overflow-y:auto;border:1px solid rgba(229,229,229,1);border-radius:4px; padding:0 10px;">
            <el-checkbox label="全选" @change="handleCheckAllChange" v-model="checkAll">全选</el-checkbox>
            <el-checkbox v-for="item in outerModelList" :key="item.id" :label="item.diagModelCode" @change="event => itemChange(event, item.diagModelCode)" v-model="checkedMap[item.diagModelCode]">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                :content="item.remark">
                <span slot="reference">
                  {{ item.diagModelName }}
                </span>
              </el-popover>
            </el-checkbox>
          </div>
        </el-form-item>
        <!-- <el-col style="height:62px;">
          <el-form-item label="时间:">
            <el-date-picker
              v-model="form.inspectDay"
              size="small"
              type="daterange"
              @input="inspectDayChange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="任务编号:" prop="taskNumber">
            <el-select v-model="form.taskNumber" size="small" placeholder="请选择任务" class="searchItemWidth">
              <el-option v-for="item in taskNumberList" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item label="诊断模型:" style="min-height:55px; height:unset;" :rules="{ required: true, message: '请选择诊断模型', trigger: 'change'}">

          <div style="width:calc(83.333333vw - 250px); max-height:400px; overflow-y:auto;border:1px solid rgba(229,229,229,1);border-radius:4px; padding:0 10px;">
            <el-checkbox label="全选" @change="handleCheckAllChange" v-model="checkAll">全选</el-checkbox>
            <el-checkbox v-for="item in outerModelList" :key="item.id" :label="item.diagModelCode" @change="event => itemChange(event, item.diagModelCode)" v-model="checkedMap[item.diagModelCode]">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                :content="item.remark">
                <span slot="reference">
                  {{ item.diagModelName }}
                </span>
              </el-popover>
            </el-checkbox>
          </div>
        </el-form-item> -->
        <!-- <el-form-item label="选择文件:">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :multiple="false"
            :show-file-list="false"
            :auto-upload="false">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item> -->
        <el-col>
          <el-form-item label=" ">
            <el-button type="primary" @click="uploadSubmit" size="small">启动模型诊断</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
  import manualApi from '../../../api/manual'
  import eventBus from "../../../eventBus"
  import moment from 'moment'
  import myTaskApi from "../../../api/myTask";
  export default {
    name: "manual",
    data() {
      return {
        fileList: [],
        disable: false,
        tree: [],
        checkAll: '',
        form: {
          taskStartTime: [],
          companyCode: '',
          taskNumber: '',
          stationName: '',
          fileName: '',
          describe: '',
          title: {},
          // inspectDay: []
        },
        checkedMap: {},
        isIndeterminate: false,
        stationList: [],
        taskNumberList: [],
        outerModelList: [],
        rules: {
          taskStartTime: [
            { required: true, type:Array, message: '请选择任务开始时间', trigger: 'blur' }
          ],
          taskNumber: [
            { required: true, message: '请输入场站名称', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
      this.getCompanyList()
      this.getOuterModelList()
      this.form.taskStartTime = [moment().subtract(0.5, 'years'), moment()]
      this.getTaskList()
      let query = this.$route.query
      if (query.taskFlowCode) {
        this.form.companyCode = query.companyCode
        this.companyChange(query.companyCode || '无值', query.stationCode, query.inspectTaskCode)
        this.form.fileName = query.oriFileName
        this.form.describe = query.fileDescribe
        this.disable = true
      }
    },
    methods: {
      // querySearchAsync(queryString, cb, type) {
      //   console.log(queryString, cb, type);
      // },
      // handleSelect() {},
      getOuterModelList() {
        manualApi.getOuterModelList().then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.outerModelList = res.data.data
            this.outerModelList.map(item => {
              this.checkedMap[item.diagModelCode] = false
            })
          }
        })
      },
      stationChange(value) {
        this.taskNumberList = []
        this.form.taskNumber = ''
        if (!value) {
          this.form.stationName = ''
          return
        }
        let params = {
          companyCode: this.form.companyCode,
          stationCode: value,
          inspectDayStart: '',
          inspectDayEnd: ''
        }
        if (this.form.inspectDay && this.form.inspectDay[0]) {
          params.inspectDayStart = moment(this.form.inspectDay[0]).format('YYYY-MM-DD HH:mm:ss')
          params.inspectDayEnd = moment(this.form.inspectDay[1]).format('YYYY-MM-DD HH:mm:ss')
        }
        this.getTaskList()
        // manualApi.getTaskNumberByCompany(params).then(res => {
        //   if (res && res.status === 200 && res.data.code === 200) {
        //     this.taskNumberList = res.data.data
        //   }
        // })
      },
      getTaskList() {
        this.taskNumberList = []
        this.form.taskNumber = ''
        let param = {
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          inspectDayStart: this.form.taskStartTime && this.form.taskStartTime[0] ? moment(this.form.taskStartTime[0]).format('YYYY-MM-DD HH:mm:ss') : '',
          inspectDayEnd: this.form.taskStartTime && this.form.taskStartTime[1] ? moment(this.form.taskStartTime[1]).format('YYYY-MM-DD HH:mm:ss') : '',
          oriFileName: this.form.fileName,
          fileRemark: this.form.describe
        }
        manualApi.getTaskLists(param).then(res => {
            if (res && res.status === 200 && res.data.code === 200) {
              this.taskNumberList = res.data.data
            }
        })
      },
      inspectDayChange(value) {
        this.getTaskList()
        // this.taskNumberList = []
        // this.form.taskNumber = ''
        // let params = {
        //   companyCode: this.form.companyCode,
        //   stationCode: this.form.stationName,
        //   inspectDayStart: '',
        //   inspectDayEnd: ''
        // }
        // if (!this.form.companyCode || !this.form.stationName) {
        //   return
        // }
        // if (value && value[0]) {
        //   params.inspectDayStart = moment(value[0]).format('YYYY-MM-DD HH:mm:ss')
        //   params.inspectDayEnd = moment(value[1]).format('YYYY-MM-DD HH:mm:ss')
        // }
        // manualApi.getTaskNumberByCompany(params).then(res => {
        //   if (res && res.status === 200 && res.data.code === 200) {
        //     this.taskNumberList = res.data.data
        //   }
        // })
      },
      companyChange(value, stationCode, inspectTaskCode) {
        this.stationList = []
        this.taskNumberList = []
        this.form.taskNumber = ''
        this.form.stationName = ''
        if (!value || value === '无值') {
          this.form.companyCode = ''
          if (stationCode) {
            this.form.stationName = stationCode
          }
          if (inspectTaskCode) {
            this.form.taskNumber = inspectTaskCode
          }
          return
        }
        manualApi.getStationByCompany({
          companyCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
            if (stationCode) {
              this.form.stationName = stationCode
            }
            if (inspectTaskCode) {
              this.form.taskNumber = inspectTaskCode
            }
          }
        })
      },
      getCompanyList() {
        manualApi.getCompanyList().then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.tree = res.data.data
          }
        })
      },
      // handleCheckAllChange(val) {
      //   let allvalue = this.outerModelList.map(item => item.diagModelCode)
      //   this.form.title = val ? allvalue : []
      //   this.isIndeterminate = false
      // },
      handleCheckAllChange(val) {
        for (let key in this.checkedMap) {
          this.checkedMap[key] = val
        }
      },
      itemChange(value, target) {
        if (value) {
          this.$set(this.checkedMap, [target], true)
          let i = 0
          for (let key in this.checkedMap) {
            if (this.checkedMap[key]) {
              i++
            }
          }
          if (i === this.outerModelList.length) {
            this.checkAll = true
          }
        } else {
          this.$set(this.checkedMap, [target], false)
          this.checkAll = false
        }
        this.$forceUpdate()
      },
      // handleChange(value) {
      //   let checkedCount = value.length
      //   this.checkAll = checkedCount === 3
      //   this.isIndeterminate = checkedCount > 0 && checkedCount < 3
      // },
      // handleRemove(file, fileList) {
      //   console.log(file, fileList, 'handleRemove');
      // },
      // handlePreview(file) {
      //   console.log(file, 'handlePreview');
      // },
      uploadSubmit() {
        if (!this.form.taskNumber) {
          this.$message.error('请选择任务编码号')
          return
        }
        let titleArr = []
        for (let key in this.checkedMap) {
          if (this.checkedMap[key]) {
            titleArr.push(key)
          }
        }
        if (titleArr.length < 1) {
          this.$message.error('请选择任务模型')
          return
        }
        // if (!this.form.inspectDay) {
        //   this.$message.error('请选择时间')
        //   return
        // }
        myTaskApi.integrationStartDiagTask({
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          fileDescribe: this.form.describe,
          taskFlowCode: this.form.taskNumber,
          oriFileName: this.form.fileName,
          taskStartTime: this.form.taskStartTime && this.form.taskStartTime[0] ? moment(this.form.taskStartTime[0]).format('YYYY-MM-DD HH:mm:ss') : "",
          inspectTaskCode: this.form.taskNumber,
          diagModelCode: titleArr.join(',')
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.$message.success(res.data.message + ',即将跳转到诊断任务查询页面！')
            eventBus.$emit("manual", { params: { diagTaskCode: res.data.data.diagTaskCode } })
            setTimeout(() => {
              this.$router.push({
                path: '/diagnosticTask/taskList',
                query: {
                  ...this.$route.query,
                  diagTaskCode: res.data.data.diagTaskCode
                }
              })
            }, 1000)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .background{
    /*background-color: rgba(0,58,102,0.6);*/
  }
  .manual {
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: #3977F3;
    }
    .el-form-item{
      margin-bottom: 3px;
    }
    .el-col{
      height: 51px !important;
    }
    .el-card__body{
      min-height: calc(100vh - 179px);
    }

  }
</style>
